﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Master/BookClub.Master" AutoEventWireup="true" CodeBehind="bookshelf.aspx.cs" Inherits="BookClubIt.bookshelf"  EnableEventValidation="false"%>
  <%@ Register TagPrefix="uc" TagName="clubnav" Src="~/UserControls/clubmenu.ascx" %>
  <%@ Register TagPrefix="uc" TagName="joinbox" Src="~/UserControls/joinbox.ascx"  %>
  <%@ Register TagPrefix="uc" TagName="currentbook" Src="~/UserControls/currentbook.ascx"  %>

  <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

  <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">

      <script type="text/javascript" src="../Scripts/bootstrap-popover.js"></script>
  <script type="text/javascript">
      $(document).ready(function () {
          //   $('.book_on_shelf').popover('show');
          $(".book_on_shelf").hover(
              function () {
                  $(this).popover('show');
              },
              function () {
                  $(this).popover('hide');
              });

          $(function () {
              $(".draggable").draggable({ helper: 'clone', snap: '.currentshelf' });

              $(".droppable").droppable({
                  drop: function (event, ui) {
                      // user drops book into current book shelf
                      if (confirm('Are you sure you want to change your current book?')) {
                          // update current book in database.
                          var cid = $('#MainContent_hdnBid').val();
                          var bookID = ui.draggable.attr("id");
                          var uid = $('#MainContent_hdnUid').val();
                          $.ajax({
                              type: "POST",
                              url: "../AjaxFunctions.asmx/ChangeBook",
                              data: '{BookClub_Id : "' + cid + '", Book_Id : "' + bookID + '", User_Id : "' + uid + '"}',
                              contentType: "application/json; charset=utf-8",
                              dataType: "json",
                              success: function (msg) {
                                  alert('The book has been changed!');
                              },
                              error: function () {
                                  alert('error');
                              }
                          });

                          // change book image in the ui.
                          var newbook = $(ui.draggable).children("a").children("img").attr('src');
                          $(".currentshelf").children("img").attr("src", newbook);
                      } else {
                          return false;
                      }
                  }
              });
          });


          $(".droppable-trash").droppable({
              drop: function (event, ui) {
                  // user drops book into current book shelf
                  if (confirm('Are you sure you want to remove this book?')) {
                      // update current book in database.
                      var cid = $('#MainContent_hdnBid').val();
                      var bookID = ui.draggable.attr("id");
                      var uid = $('#MainContent_hdnUid').val();
                      $.ajax({
                          type: "POST",
                          url: "../AjaxFunctions.asmx/RemoveBookFromShelf",
                          data: '{BookClub_Id : "' + cid + '", Book_Id : "' + bookID + '", User_Id : "' + uid + '"}',
                          contentType: "application/json; charset=utf-8",
                          dataType: "json",
                          success: function (msg) {
                              alert('The book has been removed!');
                              window.location.reload();
                          },
                          error: function () {
                              alert('error');
                          }
                      });
                  } else {
                      return false;
                  }
              }
          });
          // });

      });
</script>

<script type="text/javascript">
  $(document).ready(function () {
      $('.booksearch').watermark('Title / ISBN');
    });

	</script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
 <asp:ScriptManager ID="ScriptManager1" runat="server" />

    <asp:HiddenField ID="hdnBid" runat="server" />
        <asp:HiddenField ID="hdnUid" runat="server" />
<div class="row">
<div class="left-nav">
<uc:clubnav id="clubnav"  runat="server" />
</div>


<div class="content">

                <h1><small><asp:label id="lblClubName" runat="server"/> BookShelf</small></h1>
                <p>Here you can view all your books in your bookshelf. Add books you would like to read in the future or change your current book.</p>
    
     <asp:Button ID="btnOpenModal" runat="server" Text="Add Books to Shelf" CssClass="btn btn-primary" Visible="false" />
        <asp:Panel ID="popupPanel" runat="server" Style="display: none" CssClass="popup" Height="600px" Width="600px">
            <asp:Button ID="cancelbutton" runat="server" Text="x" CssClass="close-button" />
           <asp:Panel ID="pnlBookSearch" runat="server" Visible="false" CssClass="pnlBookSearch">
<h3>Add books to your book shelf</h3>
<p>Search for books to add to your book shelf to read.</p>
<asp:TextBox runat="server" ID="txtBook" style="margin-bottom:0" Width="200px"/>
<asp:Button runat="server" ID="btnSearch" Text="Search books" CssClass="btn btn-primary booksearch" OnClick="SearchBook_Click" />
<p style="margin-top:10px;"><asp:Label ID="lblSearchText" runat="server" /></p>

<asp:GridView ID="grdBookSearch"
 OnRowDataBound="grdBookSearch_OnRowDataBound"
  runat="server"
   AutoGenerateColumns="false"
    AlternatingRowStyle-CssClass="alt"
     CssClass="discussion-topics"
     Width="100%"
     GridLines="None" onrowcommand="grdBookSearch_RowCommand"
     ShowHeader="false">
<Columns>


    <asp:TemplateField HeaderStyle-CssClass="main-link" ItemStyle-CssClass="book-details">
           <ItemTemplate>
           <asp:HyperLink ID="lnkBookLink" runat="server" />
           <asp:Image ID="imgBookImage" runat="server" />
           <asp:Label ID="lblBookTitle" runat="server" />
          <%-- <asp:Label ID="lblBookAuthor" runat="server" />--%>
           <asp:HiddenField ID="hdnASIN" runat="server" />
           </ItemTemplate>
      </asp:TemplateField>

        <asp:TemplateField ItemStyle-CssClass="button">
           <ItemTemplate >
          <asp:LinkButton ID="lnkAddToShelf" CssClass="btn btn-mini btn-success" runat="server" Text="+ add to shelf" CommandName="AddToShelf" />
           </ItemTemplate>
      </asp:TemplateField>

</Columns>
</asp:GridView>
 
  </asp:Panel>
     
       
        </asp:Panel>
        <cc1:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="mpe" runat="server"
            PopupControlID="popupPanel" CancelControlID="cancelbutton" Enabled="True" TargetControlID="btnOpenModal"
            BackgroundCssClass="modalBackground2">
        </cc1:ModalPopupExtender>


       <asp:Repeater ID="rptBookShelf" runat="server">
    <HeaderTemplate>
    <div class="newshelf-container">
    <div class="newshelf">
    <div class="newshelf-right">
    <ul class="sortable clearfix">
    </HeaderTemplate>
    <ItemTemplate>
    <li id="<%# DataBinder.Eval(Container.DataItem, "ID")%>" class="draggable"><a class="book_on_shelf" href="bookdetail.aspx?asin=<%# DataBinder.Eval(Container.DataItem, "ASIN")%>"><img src="<%# DataBinder.Eval(Container.DataItem, "MediumImageURL")%>" height="105px" width="75px" alt="<%# DataBinder.Eval(Container.DataItem, "Title")%>" border="0" /></a></li>
    </ItemTemplate>
    <FooterTemplate>
    </ul>
    </div>
    </div>
    </div>
    </FooterTemplate>
    </asp:Repeater>

</div>

<div class="right-sidebar">

<uc:joinbox id="joinbox"  runat="server" />

<div class="alert alert-info" id="divDragInfo" runat="server" visible="false">
Drag a book to this shelf to set it as your current book. Drag it to the trash to remove it from your shelf.
</div>

<uc:currentbook id="currentbook"  runat="server" />

<div id="divTrash" class="trashcan droppable-trash" runat="server" visible="false">

</div>

 <script type="text/javascript"><!--
     google_ad_client = "ca-pub-1776925204000985";
     /* bci_250_right */
     google_ad_slot = "4159600899";
     google_ad_width = 250;
     google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>

</asp:Content>
